﻿@page "/PivotGridTemplates"
@inject ISalesInfoDataProvider SaleInfoDataProvider
@layout DataProviderAccessArea<ISalesInfoDataProvider>
<div class="demo-description">
    <h2>Pivot Grid Templates</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPivotGrid-1">Pivot Grid</a> component allows you to use native Razor markup to define custom templates for its elements.
    </p>
    <p>
        This demo specifies templates for the following Pivot Grid Fields:
    </p>
    <ul>
        <li>
            <p><b>Quarter</b> - Uses a <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPivotGridField.HeaderTemplate">HeaderTemplate</a> to format quarter numbers.</p>
        </li>
        <li>
            <p><b>Month</b> - Uses a HeaderTemplate to transform month numbers into culture-specific month names.</p>
        </li>
        <li>
            <p><b>Count</b> - Uses a <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPivotGridField.DataTemplate">DataTemplate</a> to apply bold formatting to all values.</p>
        </li>
        <li>
            <p><b>Amount</b> - Uses a DataTemplate to apply conditional formatting to values.</p>
        </li>
    </ul>
</div>

@if(GridData == null) {
    <p><em>Loading...</em></p>
} else {
    <DxPivotGrid Data="@GridData"
                 ShowGrandTotals="@ShowGrandTotals"
                 ShowFieldHeaders="@ShowFieldHeaders"
                 CssClass="mw-1100">
        <DxPivotGridField Field="@nameof(SaleInfo.Region)" SortOrder="PivotGridSortOrder.Ascending" Area="PivotGridFieldArea.Row" />
        <DxPivotGridField Field="@nameof(SaleInfo.Country)" Area="PivotGridFieldArea.Row" />
        <DxPivotGridField Field="@nameof(SaleInfo.City)" Area="PivotGridFieldArea.Row" />
        <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Year" Area="PivotGridFieldArea.Column" Caption="Year" />
        <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Quarter" Area="PivotGridFieldArea.Column" Caption="Quarter">
            <HeaderTemplate>
                @($"Q{context}")
            </HeaderTemplate>
        </DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Month" Area="PivotGridFieldArea.Column" Caption="Month">
            <HeaderTemplate>
                @System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName((int)context)
            </HeaderTemplate>
        </DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.Amount)" Area="PivotGridFieldArea.Data" SummaryType="PivotGridSummaryType.Sum">
            <DataTemplate>
                <span class="@((decimal)context > 100000 ? "text-success" : "text-danger")">
                    @string.Format("{0:c0}", context)
                </span>
            </DataTemplate>
        </DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.OrderId)" Caption="Count" Area="PivotGridFieldArea.Data" SummaryType="PivotGridSummaryType.Count">
            <DataTemplate>
                <span class="font-weight-bold">@context</span>
            </DataTemplate>
        </DxPivotGridField>
    </DxPivotGrid>
    <CodeSnippet_Pivot_Templates></CodeSnippet_Pivot_Templates>
}

@code {

    IEnumerable<SaleInfo> GridData;
    bool ShowGrandTotals = true, ShowFieldHeaders = true;

    protected override async Task OnInitializedAsync() {
        GridData = await SaleInfoDataProvider.GetSalesAsync();
    }
}
